<template>
  <view class="capsuleButton">
    <view
      class="btn_box"
      :style="{
        backgroundColor: value === item[valueKey] ? activityColor : bgColor,
      }"
    >
      <view
        v-for="(item, index) in list"
        :key="index"
        :class="value == item[valueKey] ? 'btn activity' : 'btn'"
        :style="{
          backgroundColor: value === item[valueKey] ? activityColor : bgColor,
        }"
        @click="changeBtn(item)"
      >
        {{ item[btnTitleNameKey] }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  model: {
    // 新增model配置
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    btnTitleNameKey: {
      type: String,
      default: "name",
    },
    valueKey: {
      type: String,
      default: "value",
    },
    bgColor: {
      type: String,
      default: "#f5e6e6",
    },
    activityColor: {
      type: String,
      default: "#a22c26",
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    /**
     * 点击按钮
     */
    changeBtn(val) {
      if (this.loading) {
        return;
      }
      const selectedValue = val[this.valueKey];
      console.log(selectedValue);

      this.$emit("input", selectedValue); // 触发v-model更新
      this.$emit("change", val); // 触发change事件
      console.log("当前点击值:", val[this.valueKey]);
      console.log("当前value值:", this.value);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.capsuleButton {
  border-radius: 25rpx;
  height: 50rpx;
  overflow: hidden;

  display: inline-block;
  .btn_box {
    display: flex;
    align-items: center;
    // padding: 10rpx 20rpx;

    .btn {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      font-size: 24rpx;
      color: #333;
      &.activity {
        color: #fff;
        z-index: 99;
        border-radius: 25rpx;
      }
    }
  }
}
</style>